<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写日记</title>
</head>
<body>
    <h1>写日记</h1>
    <form id="diaryForm">
        <label for="date">日期:</label>
        <input type="date" id="date" name="date" required><br><br>

        <label for="mood">心情:</label>
        <input type="text" id="mood" name="mood" required><br><br>

        <label for="weather">天气:</label>
        <input type="text" id="weather" name="weather" required><br><br>

        <label for="event">事件:</label><br>
        <textarea id="event" name="event" rows="4" cols="50" required></textarea><br><br>

        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('diaryForm').addEventListener('submit', function(event) {
            event.preventDefault();

            var formData = new FormData(this);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/submit_diary', true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            };

            xhr.send(formData);
        });
    </script>
</body>
</html>